<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount">累加count</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "count",
  computed: {
    ...mapState(["count", "num"]),
  },
  methods: {
    incrementCount() {
      console.log(this.$store);
      //在$store对象上有一个commit方法,可以用来提交mutations
      this.$store.commit("incrementCount");
    },
    incrementNCount() {
      /* commit方法的第一个参数是提交的事件名称，第二个参数是payload载荷(传递的数据) */
      this.$store.commit("incrementNCount", { n: 2 });
    },
  },
};
</script>

<style></style>
